<script lang="ts" setup>
import {ref, onMounted, onUnmounted, nextTick, computed} from "vue";
import {Document, Menu as IconMenu, Location, Setting} from "@element-plus/icons-vue";
import Header from "@/views/header.vue";
import Head from "@/views/head.vue";
import {useMyStore} from "../store/userStore";
import {storeToRefs} from "pinia";

const store = useMyStore();
const {count} = storeToRefs(store);
function increment() {
    store.increment();
}

const arr = ref("父传子");
const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const openpagevaria = ref([1, 2, 3]);
const open = (bool: any) => {
    openpagevaria.value = bool;
    console.log(openpagevaria.value);
};
function selectGoods(item: any) {
    console.log(item._rawValue);
}

async function updateView() {
    increment(); // 修改状态

    // 这里可以执行依赖于DOM更新的操作，虽然这通常不是必要的，除非你有特殊需求。
}
</script>
<template>
    <div>
        <p>Age: {{ count }}</p>

        <button @click="updateView">请点击</button>
    </div>

    <div class="header">
        <Header @oepnage="open" @select="selectGoods" />
    </div>
    <div id="center" style="display: flex">
        <!-- 左侧导航 -->
        <div class="cen_left">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :value="false">expand</el-radio-button>
                <el-radio-button :value="true">collapse</el-radio-button>
            </el-radio-group>
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                :collapse="isCollapse"
                @open="handleOpen"
                @close="handleClose"
                router
            >
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>Navigator One</span>
                    </template>
                    <el-menu-item-group>
                        <template #title><span>Group One</span></template>
                        <el-menu-item index="1-1" :route="{path: '/TheWelcome/table'}">item one</el-menu-item>
                        <el-menu-item index="1-2">item two</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group Two">
                        <el-menu-item index="1-3">item three</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="1-4">
                        <template #title><span>item four</span></template>
                        <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <el-menu-item index="2">
                    <el-icon><icon-menu /></el-icon>
                    <template #title>Navigator Two</template>
                </el-menu-item>
                <el-menu-item index="3" disabled>
                    <el-icon><document /></el-icon>
                    <template #title>Navigator Three</template>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon><setting /></el-icon>
                    <template #title>Navigator Four</template>
                </el-menu-item>
            </el-menu>
        </div>
        <!-- 右侧展示区 -->
        <div class="cen_right">
            <router-view></router-view>
        </div>
        <Head />
    </div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.header {
    width: 100%;
    height: 80px;
    padding-left: 24px;
    padding-top: 12px;
    padding-right: 24px;
    box-sizing: border-box;
    background: #77cffc;
    padding-bottom: 24px;
}
.cen_right {
    width: 80%;
}
</style>
